---
layout: homepage
title: Dart programming language
title: Dart 编程语言主页 | Dart 中文文档
description: Dart is a client-optimized language for fast apps on any platform
description: Dart 是一个针对全平台优化的编程语言。
js:
- url: /assets/dash/js/dartpad_picker_main.dart.js
  defer: true
---
<!-- Hero animation -->
<div class="d-none d-sm-none d-md-block">
    <section class="dash-header">
        <video autoplay loop muted playsinline>
            <source src="assets/dash/video/hotreload.webm"
                    type='video/webm;codecs="vp8, vorbis"' />
            <source src="assets/dash/video/hotreload.mp4"
                    type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
            <img src=assets/dash/2x/paint-your-ui.png />
        </video>
    </section>
</div>

<section class="dash-header d-sm-block d-md-none">
    <img src="assets/dash/2x/paint-your-ui.png"/>
</section>

<!-- Dart tag-line -->
<section class="dash-header-callout">
    <div class="callout-title">
        Dart 是一个为全平台构建快速应用的客户端优化的编程语言。
    </div>
    <div class="callout-button">
        <button class="btn btn-link btn-icon" type="button" data-toggle="modal" data-target="#videoModal" data-video="5F-6n_2XWR8">
            <i class="material-icons">play_circle_filled</i> Watch video
        </button>
    </div>

    <img class="made-by" src="assets/dash/2x/supported by google@2x.png" alt="Supported by Google"/>
    <div class="callout-oss">
        <p>Dart 是免费且开源的
            &nbsp;<a href="https://github.com/dart-lang/" title="Dart project GitHub organization"
            class="no-automatic-external"><i class="fab fa-github fa-sm"></i></a>
        </p>
    </div>

</section>

<!-- Dart pillars -->
<section class="dash-dart-features">
    <div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-12">
            <div class="feature">
                <div class="feature-icon"><img src="assets/dash/2x/multiplatform performance light op1@2x.png"/></div>
                <div class="feature-title">为 UI 构建<br/>优化</div>
                <div class="feature-desc">使用针对用户界面的创造进行优化的语言进行开发
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-12">
            <div class="feature">
                <div class="feature-icon"><img src="assets/dash/2x/client optimised light op1@2x.png"/></div>
                <div class="feature-title">研发生产力<br/>提高</div>
                <div class="feature-desc">反复地修改: 在正在运行的应用中
                使用热重载立刻看到您的修改
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-12">
                <div class="feature">
                    <div class="feature-icon"><img src="assets/dash/2x/productive dev light op1@2x.png"/></div>
                    <div class="feature-title">在全平台<br/>极速运行</div>
                    <div class="feature-desc">可编译为移动端、桌面端及后端的 ARM & x64 的二进制文件，
                    或是为 Web 平台编译 Javascript
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Dart pillar details, narrow design -->
<div class="dart-dash-details container-fluid d-sm-block d-md-none" tabindex="-1">
    <section class="row dash-row">
        <div class="col-lg-7 col-md-6 col-sm-12 content-image">
            <img class="gallerySix" src="assets/dash/svg/1-1 async await.svg"/>
        </div>
        <div class="col-lg-5 col-md-6 col-sm-12 content-info">
            <div class="content-container">
                <div class="content-icon">
                    <img src="assets/dash/2x/multiplatform performance light op1@2x.png"/>
                </div>
                <div class="content-feature">为 UI 构建优化</div>
                <div class="content-desc" id="gallerySix">
                    <ul class="selector">
                        <li class="highlight" data-banner="assets/dash/svg/1-1 async await.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    为基于事件驱动的用户界面提供成熟且完备的
                                    <a href="/codelabs/async-await">异步-等待</a> 体系，
                                    同时配备了
                                    <a href="/guides/language/language-tour#isolates">基于 isolate 的并发</a>
                                </div>
                            </div>
                        </li>
                        <li data-banner="assets/dash/svg/1-2 language optimized.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    专为构建用户界面优化的语言，其中包含了
                                    <a href="/null-safety">健全的空安全</a>、
                                    用于展开集合的<a href="/guides/language/language-tour#spread-operator">展开操作符</a>
                                    以及<a href="/guides/language/language-tour#collection-operators">集合内的条件语句</a>
                                    用于为每个平台定制 UI
                                </div>
                            </div>
                        </li>
                        <li data-banner="assets/dash/svg/1-3 familiar syntax.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    <a href="/samples">语法相近</a>、
                                    易于上手的编程语言
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </section>
    <section class="row dash-row">
        <div class="col-lg-7 col-md-6 col-sm-12 content-image">
            <img class="galleryFive" src="assets/dash/svg/2-1 hot reload iterative changes.svg"/>
        </div>
        <div class="col-lg-5 col-md-6 col-sm-12 content-info">
            <div class="content-container">
                <div class="content-icon">
                    <img src="assets/dash/2x/productive dev light op1@2x.png"/>
                </div>
                <div class="content-feature">研发生产力提高</div>
                <div class="content-desc" id="galleryFive">
                    <ul class="selector">
                        <li class="highlight" data-banner="assets/dash/svg/2-1 hot reload iterative changes.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    在正在运行的应用中使用
                                    <a href="https://flutter.cn/docs/development/tools/hot-reload" class="no-automatic-external">
                                        热重载</a>，
                                    从而快速并持续地应用更改，并且立刻看到更改的效果
                                </div>
                            </div>
                        </li>
                        <li data-banner="assets/dash/svg/2-2 flexible type.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    在编写代码时享受灵活的类型系统，以及强大且
                                    <a href="/guides/language/analysis-options">可配置的静态分析工具</a>
                                </div>
                            </div>
                        </li>
                        <li data-banner="assets/dash/svg/2-3 runtime insight.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    使用您选择的代码编辑器进行
                                    <a href="https://flutter.cn/docs/development/tools/devtools/performance" class="no-automatic-external">性能分析</a>、
                                    <a href="https://flutter.cn/docs/development/tools/devtools/logging" class="no-automatic-external">日志记录</a>以及
                                    <a href="https://flutter.cn/docs/development/tools/devtools/debugger"
                                        class="no-automatic-external">调试</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </section>
    <section class="row dash-row">
        <div class="col-lg-7 col-md-6 col-sm-12 content-image">
            <img class="galleryFour dash-align-left" src="assets/dash/svg/3-1 - aot compile.svg"/>
        </div>
        <div class="col-lg-5 col-md-6 col-sm-12 content-info">
            <div class="content-container">
                <div class="content-icon">
                    <img src="assets/dash/2x/client optimised light op1@2x.png"/>
                </div>
                <div class="content-feature">在全平台极速运行</div>
                <div class="content-desc" id="galleryFour">
                    <ul class="selector">
                        <li class="highlight" data-banner="assets/dash/svg/3-1 - aot compile.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    使用 <a href="/overview#native-platform">AOT 编译</a>为机器码，
                                    <a href="https://github.com/timsneath/time">极速启动</a> 您的应用
                                </div>
                            </div>
                        </li>
                        <li data-banner="assets/dash/svg/3-2 target web.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    使用完整、成熟且快速的
                                    <a href="/overview#web-platform">JavaScript 编译器</a>
                                    为 Web 平台编译应用
                                </div>
                            </div>
                        </li>
                        <li data-banner="assets/dash/svg/3-3 backend code.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    仅用一种语言即可编写应用的
                                    <a href="/tutorials/server/httpserver">后端代码</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Dart pillar details, wide design -->
<div class="dart-dash-details container-fluid d-none d-sm-none d-md-block">
    <section class="row dash-row">
        <div class="col-lg-5 col-md-6 col-sm-12 content-info">
            <div class="content-container dash-align-right">
                <div class="content-icon"><img src="assets/dash/2x/multiplatform performance light op1@2x.png"/> </div>
                <div class="content-feature">为 UI 构建优化</div>
                <div class="content-desc" id="galleryOne">
                    <ul class="selector">
                        <li class="highlight" tabindex="0" data-banner="assets/dash/svg/1-1 async await.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    为基于事件驱动的用户界面提供成熟且完备的
                                    <a href="/codelabs/async-await">异步-等待</a> 体系，
                                    同时配备了
                                    <a href="/guides/language/language-tour#isolates">基于 isolate 的并发</a>
                                </div>
                            </div>
                        </li>

                        <li tabindex="0" data-banner="assets/dash/svg/1-2 language optimized.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    专为构建用户界面优化的语言，其中包含了
                                    <a href="/null-safety">健全的空安全</a>、
                                    用于展开集合的<a href="/guides/language/language-tour#spread-operator">展开操作符</a>
                                    以及<a href="/guides/language/language-tour#collection-operators">集合内的条件语句</a>
                                    用于为每个平台定制 UI
                                </div>
                            </div>
                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/1-3 familiar syntax.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    <a href="/samples">语法相近</a>、
                                    易于上手的编程语言
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-7 col-md-6 col-sm-12 content-image">
            <img class="galleryOne dash-align-left" src="assets/dash/svg/1-1 async await.svg"/>
        </div>
    </section>

    <section class="row dash-row">
        <div class="col-lg-7 col-md-6 col-sm-12 content-image">
            <img class="galleryTwo dash-align-right" src="assets/dash/svg/2-1 hot reload iterative changes.svg"/>
        </div>
        <div class="col-lg-5 col-md-6 col-sm-12 content-info">
            <div class="content-container dash-align-left">
                <div class="content-icon"><img src="assets/dash/2x/productive dev light op1@2x.png"/></div>
                <div class="content-feature">研发生产力提高</div>
                <div class="content-desc" id="galleryTwo">
                    <ul class="selector">
                        <li class="highlight" tabindex="0" data-banner="assets/dash/svg/2-1 hot reload iterative changes.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    在正在运行的应用中使用
                                    <a href="https://flutter.cn/docs/development/tools/hot-reload" class="no-automatic-external">
                                        热重载</a>，
                                    从而快速并持续地应用更改，并且立刻看到更改的效果
                                </div>
                            </div>
                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/2-2 flexible type.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    在编写代码时享受灵活的类型系统，以及强大且
                                    <a href="/guides/language/analysis-options">可配置的静态分析工具</a>
                                </div>
                            </div>
                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/2-3 runtime insight.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    使用您选择的代码编辑器进行
                                    <a href="https://flutter.cn/docs/development/tools/devtools/performance" class="no-automatic-external">性能分析</a>、
                                    <a href="https://flutter.cn/docs/development/tools/devtools/logging" class="no-automatic-external">日志记录</a>以及
                                    <a href="https://flutter.cn/docs/development/tools/devtools/debugger"
                                        class="no-automatic-external">调试</a>
                                </div>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="row dash-row">
        <div class="col-lg-5 col-md-6 col-sm-12 content-info">
            <div class="content-container dash-align-right">
                <div class="content-icon"><img src="assets/dash/2x/multiplatform performance light op1@2x.png"/></div>
                <div class="content-feature">在全平台极速运行</div>
                <div class="content-desc" id="galleryThree">
                    <ul class="selector">
                        <li class="highlight" tabindex="0" data-banner="assets/dash/svg/3-1 - aot compile.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    使用 <a href="/overview#native-platform">AOT 编译</a>为机器码，
                                    <a href="https://github.com/timsneath/time">极速启动</a> 您的应用
                                </div>
                            </div>

                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/3-2 target web.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    使用完整、成熟且快速的
                                    <a href="/overview#web-platform">JavaScript 编译器</a>
                                    为 Web 平台编译应用
                                </div>
                            </div>

                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/3-3 backend code.svg">
                            <div>
                                <div class="bullet-container">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    仅用一种语言即可编写应用的
                                    <a href="/tutorials/server/httpserver">后端代码</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-7 col-md-6 col-sm-12 content-image">
            <img class="galleryThree dash-align-left" src="assets/dash/svg/3-1 - aot compile.svg"/>
        </div>
    </section>
    <section class="row">
        <div class="dash-dartpad">
            <a name="try-dart" class="frontanchor"></a>
            <h2>在浏览器里尝试 Dart 编程语言</h2>
            <select id="dartpad-select"></select>
            <div id="dartpad-host"></div>
            <h3>更多 Dart 编程语言体验，<a href="/codelabs">找个 codelab 教程试试看</a>，或者下载 <a href="/get-dart">Dart SDK</a>。</h3>
        </div>
    </section>
</div>

<!-- Modal -->
<div class="modal fade" data-video-modal id="videoModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="embedded-video-wrapper">
                    <video
                        id="video-player"
                        controls=""
                        src="https://files.flutter-io.cn/dart-cn/landing/why-flutter-uses-dart.mp4"
                        width="640"
                        height="360"
                        title="Why Flutter uses dart?"
                        style="position:absolute;width:100%;height:100%">
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>
